<template>
  <view class="withdrawal">
    <Navbar :title="t('order.title')"> </Navbar>
    <!-- 切换标题 -->
    <!-- <view class="type">
      <view
        class="left"
        @click="leftchange"
        :class="{ clicked: leftisClicked }"
      >
        {{ t('order.all') }}
      </view>
      <view
        class="middle"
        @click="middlechange"
        :class="{ clicked: middleClicked }"
      >
        {{ t('order.com') }}
      </view>
      <view
        class="right"
        @click="rightchange"
        :class="{ clicked: rightisClicked }"
      >
        {{ t('order.fal') }}
      </view>
    </view> -->
    <!-- 渲染完成 -->
    <scroll-view scroll-y class="scoll">
      <view v-if="orderList.length > 0">
        <view class="list" v-for="item in orderList" :key="item.goods_id">
          <view class="list-left">
            <image class="img" :src="item.goods_pic" mode="scaleToFill" />
            <view class="left-top">
              <text>{{ item.goods_name }}</text>
              <text>{{ item.goods_price }}USDT</text>
            </view>
          </view>
          <view class="list-right">
            <text>{{ item.created_at }}</text>
            <text>{{ t('order.co') }}</text>
          </view>
        </view>
      </view>
      <nodata v-else></nodata>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import api from '../../networks/apis';
import nodata from '../../components/nodata.vue';
//改标题
import Navbar from '../../components/Navbar.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 切换标题
// const leftisClicked = ref(true);
// const middleClicked = ref(false);
// const rightisClicked = ref(false);

// const leftchange = () => {
//   leftisClicked.value = !leftisClicked.value;
//   middleClicked.value = false;
//   rightisClicked.value = false;
// };
// const middlechange = () => {
//   middleClicked.value = !middleClicked.value;
//   leftisClicked.value = false;
//   rightisClicked.value = false;
// };
// const rightchange = () => {
//   rightisClicked.value = !rightisClicked.value;
//   leftisClicked.value = false;
//   middleClicked.value = false;
// };

// 获取订单列表
const orderList = ref([]);
const getOrderList = async () => {
  const res = await api.getOrderListAPI({ pagesize: 1000, page: 1 });
  orderList.value = res.data;
  console.log('----->orderList.value', orderList.value);
};
getOrderList();
</script>

<style lang="scss" scoped>
.scoll {
  // background-color: #0d1425;
  padding-bottom: 30rpx;
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

}

.withdrawal {
  width: 750rpx;
  height: 1624rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .type {
    width: 688rpx;
    height: 134rpx;
    font-size: 22rpx;
    margin: 18rpx auto;
    font-family: Arial, Arial;
    line-height: 33rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .left {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .middle {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .right {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .clicked {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 33rpx;
      border-bottom: 2px solid white;
    }
  }

  .list {
    width: 690rpx;
    height: 168rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url('/static/drawings/Rectangle 33.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 22rpx;
    padding: 25rpx;

    .list-left {
      display: flex;

      .img {
        width: 126rpx;
        height: 126rpx;
      }

      .left-top {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: #dbdbdb;
        line-height: 33rpx;
        margin-left: 20rpx;

        text:nth-child(2) {
          font-weight: 900;
          color: #ffffff;
        }
      }
    }

    .list-right {
      width: 130rpx;
      font-size: 24rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: right;

      text:nth-child(2) {
        color: #00d084;
        padding-top: 20rpx;
      }
    }
  }
}
</style>
